<template>
    <div class="refund-detail">
        <div class="status-bg clearfix">
            <p class="status fl" v-if="status">已完成</p>
            <p class="status fl" v-else>等待付款</p>
            <p class="prompt fr">19:34后自动取消</p>
        </div>
        <div class="refund-info">
            <h2>自然拼读·78期</h2>
            <p class="status">课程有效期：截止至2019年1月1日 23:59</p>
            <div class="refund-mony">
                <p class="money">实付金额: <strong>¥2300</strong></p>
                <router-link to="" tag="p" class="agreement">《VIPKID课程服务协议》</router-link>
            </div>
            <div class="order-info">
                <ul>
                    <li>
                        <span>订单编号:</span>
                        <span>9876555</span>
                    </li>
                     <li>
                        <span>下单时间:</span>
                        <span>2019-05-28  12:46:40</span>
                    </li>
                     <li>
                        <span>支付时间:</span>
                        <span>2019-05-28  12:46:40</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="call">
            <a href="tel:13458451825"><img src="../assets/images/zaixianyuyue.png" alt=""></a>
        </div>
        <div class="footer">
            <p class="cancel-order">取消订单</p>
            <p class="to-pay">去支付</p>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            status:false
        }
    }
}
</script>

<style lang="scss" scoped>
.status-bg {
    height: 2.17rem;
    background: #ff6422;
    .status {
        color:#fff;
        font-size: .44rem;
        margin-left: .72rem;
        padding-top: .52rem;
        width: 2rem;
       
    }
    .prompt {
        font-size: .28rem;
        color: #fff;
        width: 3.2rem;
        text-align: right;
        padding-right: .55rem;
        padding-top: .60rem;
    }
}
.refund-info {
    width: 90%;
    min-height: 2rem;
    border-radius: .20rem;
    background: #fff;
    position: absolute;
    top:1.35rem;
    left:5%;
     padding: .40rem 0;
   
    h2 {
        font-size: .36rem;
        color: #333;
         padding: 0 .40rem;
      
    }
    p.status {
        color: #999;
        font-size: .28rem;
        padding-top: .20rem;
        padding-bottom: .40rem;
        border-bottom: 1px solid #e5e5e5;
        padding-left: .40rem;
        padding-right: .40rem;
    }
    .refund-mony {
        padding: .45rem .40rem;
        border-bottom: 1px solid #e5e5e5;
        p.money {
            color: #333333;
            font-size: .28rem;
            text-align: right;
            strong {
                color: #ff6422;
                font-weight: bold;
                 font-size: .28rem;
            }
        }
        p.agreement {
            font-size: .24rem;
            color: #ff6422;
            text-align: right;
            padding-top: .25rem;
        }
    }
    .order-info {
        padding:.36rem .40rem;
        ul {
            li {
                margin-bottom: .20rem;
                span {
                    font-size: .28rem;
                    &:nth-child(1) {
                        color: #333;
                    }
                      &:nth-child(2) {
                        color: #999;
                    }
                }
                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}
.call {
    position: fixed;
    right: .40rem;
    top: 8rem;
    a {
        display: block;
        img {
        width: 1.26rem;
        height: 1.26rem;
    }
    }
    
}
.footer {
    width: 100%;
    height: 1.18rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    border-top:1px solid #e5e5e5;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items:center;
    -webkit-justify-content:center;
    p {
        width: 2.22rem;
        border-radius: .40rem;
        height: .76rem;
        font-size: .32rem;
        line-height: .76rem;
        text-align: center;
       
        &:nth-child(1) {
            border:1px solid #999;
            color: #999;
            margin-right: .24rem;
        }
        &:nth-child(2) {
            border:1px solid #f85415;
            background: #f85415;
            color: #fff;
           
        }
        
    }
    .to-pay:active {
                background: #e34b10;
         
        }
        .cancel-order:active {
            background: #999;
            color: #fff;
        }

}
</style>

